<template>
<div class="mod-config">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待审核采购申请" name="checkApplication">
            <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
                <el-table-column prop="applyDate" header-align="center" align="center" label="申请时间">
                    <template slot-scope="scope">{{scope.row.applyDate | formatDate}}</template>
                </el-table-column>
                <el-table-column prop="applicant" header-align="center" align="center" label="申请人"></el-table-column>
                <el-table-column prop="bookListStr" header-align="center" label="申请图书"></el-table-column>
                <el-table-column header-align="center" align="center" label="申请状态">
                    <template slot-scope="scope">
                        <span>{{scope.row.status==1?'待审核':''}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="note" header-align="center" align="center" label="备注"></el-table-column>
                <el-table-column header-align="center" align="center" width="150" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="check(scope.row)">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
            <t-purchase-check v-if="checkVisible" ref="tPurchaseCheck" @refreshDataList="getDataList"></t-purchase-check>
        </el-tab-pane>
        <el-tab-pane label="待采购订单" name="second">
            <el-form :inline="true" :model="orderBookForm" @keyup.enter.native="getSecondDataList" size="small">
                <el-form-item label="申请编号">
                    <el-input v-model="orderBookForm.purchaseId" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList()">查询</el-button>
                    <el-button type="primary" @click="order()" :disabled="secondDataListSelections.length <= 0">采购</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="secondDataList" border v-loading="secondDataListLoading" @selection-change="secondSelectionChangeHandle" style="width: 100%;">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column prop="applyDate" header-align="center" align="center" label="申请时间" width="100">
                    <template slot-scope="scope">{{scope.row.applyDate | formatDate}}</template>
                </el-table-column>
                <el-table-column prop="applicant" header-align="center" align="center" label="申请人"></el-table-column>
                <el-table-column prop="purchaseId" header-align="center" align="center" label="申请编号" width="80"></el-table-column>
                <el-table-column prop="book.name" header-align="center" label="采购图书"></el-table-column>
                <el-table-column prop="readyNum" header-align="center" label="已采购数量" width="100"></el-table-column>
                <el-table-column prop="num" header-align="center" label="申请数量" width="80"></el-table-column>
                <el-table-column prop="note" header-align="center" align="center" label="备注"></el-table-column>
                <!-- <el-table-column header-align="center" align="center" width="100" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="order(scope.row)">采购</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
            <t-purchase-order v-if="orderVisible" ref="tPurchaseOrder" @refreshDataList="getSecondDataList"></t-purchase-order>
        </el-tab-pane>
        <el-tab-pane label="待发货订单" name="third">
            <el-table :data="thirdDataList" border v-loading="thirdDataListLoading" style="width: 100%;">
                <el-table-column prop="orderDate" header-align="center" align="center" label="订货时间" width="100">
                    <template slot-scope="scope">{{scope.row.orderDate | formatDate}}</template>
                </el-table-column>
                <el-table-column prop="supplierName" header-align="center" align="center" label="供应商"></el-table-column>
                <el-table-column prop="bookNameList" header-align="center" label="采购图书"></el-table-column>
                <el-table-column header-align="center" align="center" label="订单状态" width="80">
                    <template slot-scope="scope">
                        <span>{{scope.row.orderStatus==1?'待发货':''}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="note" header-align="center" align="center" label="备注"></el-table-column>
                <el-table-column header-align="center" align="center" width="80" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="send(scope.row)">发货</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
            <el-dialog title="发货" :visible.sync="sendShow" width="30%">
                <el-form :model="sendOrder" label-width="100px">
                    <el-form-item label="发货信息">
                        <el-input v-model="sendOrder.sendInfo" placeholder="可填写发货单号"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="sendShow = false">取 消</el-button>
                    <el-button type="primary" @click="sendSubmit()">确 定</el-button>
                </span>
            </el-dialog>

            <!-- <t-purchase-order v-if="orderVisible" ref="tPurchaseOrder" @refreshDataList="getDataList"></t-purchase-order> -->
        </el-tab-pane>

        <el-tab-pane label="已发货订单" name="fourth">
            <el-table :data="fourthDataList" border v-loading="fourthDataListLoading" style="width: 100%;">
                <el-table-column header-align="center" align="center" label="订货时间" width="100">
                    <template slot-scope="scope">{{scope.row.orderDate | formatDate}}</template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="发货时间" width="100">
                    <template slot-scope="scope">{{scope.row.sendDate | formatDate}}</template>
                </el-table-column>
                <el-table-column prop="supplierName" header-align="center" align="center" label="供应商"></el-table-column>
                <el-table-column prop="bookNameList" header-align="center" label="采购图书"></el-table-column>
                <el-table-column header-align="center" align="center" label="订单状态" width="80">
                    <template slot-scope="scope">
                        <span>{{scope.row.orderStatus==2?'已发货':''}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sendInfo" header-align="center" align="center" label="发货信息"></el-table-column>
                <el-table-column prop="note" header-align="center" align="center" label="备注"></el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </el-tab-pane>
    </el-tabs>
</div>
</template>

<script>
import TPurchaseCheck from "./tpurchase-check";
import TPurchaseOrder from "./tpurchase-order";
export default {
    data() {
        return {
            activeName: "checkApplication",
            dataList: [],
            secondDataList: [],
            thirdDataList: [],
            fourthDataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            secondDataListLoading: false,
            thirdDataListLoading: false,
            fourthDataListLoading: false,
            checkVisible: false,
            orderVisible: false,
            sendShow: false,
            sendOrder: {},
            orderBookForm: {
                purchaseId: null
            },
            secondDataListSelections: []
        };
    },
    components: {
        TPurchaseCheck,
        TPurchaseOrder,
    },
    activated() {
        this.getDataList();
    },
    methods: {
        secondSelectionChangeHandle(val) {
            this.secondDataListSelections = val;
        },
        handleClick(tab, event) {
            if (tab.name == "second") {
                this.getSecondDataList();
            } else if (tab.name == "third") {
                this.getThirdDataList();
            } else if (tab.name == "fourth") {
                this.getFourthDataList();
            }
        },
        // 获取待审核数据列表
        getDataList() {
            this.dataListLoading = true;
            this.$http({
                url: this.$http.adornUrl("/generator/tpurchaseapplication/list"),
                method: "get",
                params: this.$http.adornParams({
                    page: this.pageIndex,
                    limit: this.pageSize,
                    status: 1,
                }),
            }).then(({
                data
            }) => {
                if (data && data.code === 0) {
                    this.dataList = data.page.list;
                    this.dataList.forEach(function (item) {
                        let bookListStr = "";
                        item.bookList.forEach(function (i) {
                            bookListStr += i.name + ",";
                        });
                        item.bookListStr = bookListStr.substr(0, bookListStr.length - 1);
                    });
                    this.totalPage = data.page.totalCount;
                } else {
                    this.dataList = [];
                    this.totalPage = 0;
                }
                this.dataListLoading = false;
            });
        },
        //获取待采购数据
        getSecondDataList() {
            this.secondDataListLoading = true;
            this.$http({
                url: this.$http.adornUrl("/generator/tpurchaseapplication/list/book"),
                method: "get",
                params: this.$http.adornParams({
                    page: this.pageIndex,
                    limit: this.pageSize,
                    status: 2,
                }),
            }).then(({
                data
            }) => {
                if (data && data.code === 0) {
                    this.secondDataList = data.page.list;
                    this.totalPage = data.page.totalCount;
                } else {
                    this.secondDataList = [];
                    this.totalPage = 0;
                }
                this.secondDataListLoading = false;
            });
        },
        //获取待发货数据
        getThirdDataList() {
            this.thirdDataListLoading = true;
            this.$http({
                url: this.$http.adornUrl("/generator/torder/list"),
                method: "get",
                params: this.$http.adornParams({
                    page: this.pageIndex,
                    limit: this.pageSize,
                    status: 1,
                }),
            }).then(({
                data
            }) => {
                if (data && data.code === 0) {
                    this.thirdDataList = data.page.list;
                    this.totalPage = data.page.totalCount;
                } else {
                    this.thirdDataList = [];
                    this.totalPage = 0;
                }
                this.thirdDataListLoading = false;
            });
        },
        //获取已发货数据
        getFourthDataList() {
            this.fourthDataListLoading = true;
            this.$http({
                url: this.$http.adornUrl("/generator/torder/list"),
                method: "get",
                params: this.$http.adornParams({
                    page: this.pageIndex,
                    limit: this.pageSize,
                    status: 2,
                }),
            }).then(({
                data
            }) => {
                if (data && data.code === 0) {
                    this.fourthDataList = data.page.list;
                    this.totalPage = data.page.totalCount;
                } else {
                    this.fourthDataList = [];
                    this.totalPage = 0;
                }
                this.fourthDataListLoading = false;
            });
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getDataList();
        },
        // 审核
        check(row) {
            this.checkVisible = true;
            this.$nextTick(() => {
                this.$refs.tPurchaseCheck.init(row);
            });
        },
        // 采购
        order() {
            this.orderVisible = true;
            this.$nextTick(() => {
                this.$refs.tPurchaseOrder.init(this.secondDataListSelections);
            });
        },
        send(row) {
            this.sendShow = true;
            this.sendOrder = row;
        },
        sendSubmit() {
            this.$http({
                url: this.$http.adornUrl(`/generator/torder/send`),
                method: "post",
                data: this.$http.adornData({
                    id: this.sendOrder.id,
                    sendInfo: this.sendOrder.sendInfo,
                }),
            }).then(({
                data
            }) => {
                if (data && data.code === 0) {
                    this.$message({
                        message: "操作成功",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                            this.sendShow = false;
                            this.getThirdDataList();
                        },
                    });
                } else {
                    this.$message.error(data.msg);
                }
            });
        },
    },
};
</script>
